<template>
  <div>
    <button @click="visible = !visible">开关</button>
    <button @click="visible2 = !visible2">开关</button>
    <sk-layx
      :visible.sync="visible"
      title="提示"
      @open="handleOpen"
      @close="handleClose"
      @opened="handleOpened"
      @closed="handleClosed"
      :before-close="handleBeforeClose"
      :draggable="true"
      :scalable="true"
      :scaleMinHeight="200"
      :scaleMinWidth="200"
      :scaleMaxHeight="800"
      :scaleMaxWidth="800"
    >
      <div style="height:250px;width:440px">
        内容
      </div>
      <div slot="footer">
        预留的操作位
      </div>
    </sk-layx>
    <sk-layx
      :visible.sync="visible2"
      title="提示"
      @open="handleOpen"
      @close="handleClose"
      @opened="handleOpened"
      @closed="handleClosed"
      :before-close="handleBeforeClose"
      :draggable="true"
      :scalable="true"
      :scaleMinHeight="200"
      :scaleMinWidth="200"
      :scaleMaxHeight="800"
      :scaleMaxWidth="800"
    >
      <div style="height:250px;width:440px">
        内容
      </div>
      <div slot="footer">
        预留的操作位
      </div>
    </sk-layx>
  </div>
</template>

<script>
import Vue from "vue";
import { Layx, LayxSaver } from "../../packages";
Vue.use(Layx).use(LayxSaver);
export default {
  name: "useWicket",
  data: () => ({
    top: 100,
    left: 100,
    visible: false,
    visible2: false
  }),
  computed: {},
  watch: {},
  methods: {
    handleFullscreen(val) {
      console.log(val);
    },
    handleOpen() {
      console.log("open");
    },
    handleOpened() {
      console.log("opened");
    },
    handleClose() {
      console.log("close");
    },
    handleClosed() {
      console.log("closed");
    },
    handleBeforeClose(next) {
      setTimeout(() => {
        next();
      }, 0);
    }
  }
};
</script>

<style scoped></style>
